<template>
  <FullScreenDialog :title="dialog.title"   :visible="dialog.visible"
    v-if="dialog.visible" :showFooter="dialog.showFooter" @onClose="onClose" @onConfirm="confirm">
    <template v-slot:content>
      <div class="abnormal-container">
        <div class="container-image">
          <!-- 数据怎么过滤 ? 只需要一个矩形 -->
           <showPdf ref="RefShowImage" :img="showDate.img_info && showDate.img_info[0] && showDate.img_info[0].imageBase64"
            :img-obj="showDate.img_info && showDate.img_info[0] && showDate.img_info[0]"
            :record-list="showDate.recordList" :type="showDate.type"></showPdf>
        </div>
        <div class="container-mark">
          <!-- 这个地方数据怎么设计 需要怎么过滤? 只需要一个 批注数据 -->
          <showMark :limits="showDate.limits"
            :annotate="showDate.img_info && showDate.img_info[0] && showDate.img_info[0].commentsDTOs"></showMark>
        </div>
        <div class="container-abnormal-detail">
          <abnormalForm :rowValue="rowValue"></abnormalForm>
        </div>
      </div>
    </template>
  </FullScreenDialog>
</template>

<script setup lang='ts'>
import { ref, nextTick } from 'vue'
import useDialog from '@/hooks/useDialog';
import showPdf from '../Approval/showPdf.vue';
import showMark from '../Approval/showMark.vue';
import abnormalForm from './abnormalForm.vue';
import abnormalDetails from '@/view/02ReviewBusinessMan/02ReviewManagement/composables/abnormalDetail'
const { dialog, onShow } = useDialog()
const RefShowImage=ref()
const {showDate,clearShowDate,getImage,getFileList,btnPre,btnNext}=abnormalDetails(RefShowImage)
const rowValue = ref()
const confirm = () => { }
const onClose = () => {
  // 清除数据
  dialog.visible = false
   RefShowImage.value?.clearCanvasDate()
  clearShowDate()
}
const show = async (type: string, row?: any,detail?:any) => {
  // 1 左侧 pdf 2 中间标注 3 右侧异常单
  await getFileList({id:detail.fileId,pageNumber:detail.pageNumber})
  await getImage({ filesId: detail.fileId, pageNumber:detail.pageNumber })
  rowValue.value = detail
  dialog.height = 900
  dialog.title = 'copyRow.fileName'
  dialog.showFooter = false
  dialog.screenFlag = false
  onShow()
  // 需要一个死数据就好了后期就是怎么操作的 ok 
    if (showDate.img_info.length > 0) {
    nextTick(() => {
      //  console.log(RefImgCanVas.value,'RefImgCanVas');
      RefShowImage.value?.initImage()
    })
  }
}
defineExpose({
  show
})
</script>
<style scoped lang='scss'>
.abnormal-container{
  display: flex;
  height: 100%;
  .container-image{
      width: 814px; 
      height: 100%; 
  }
  .container-mark{
    width: 500px;

  }
  .container-abnormal-detail{
    width: calc(100% - 1314px);

  }

}
</style>